<template>
    <div>
     <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="700" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search" label-width="110px" class="demo-ruleForm">
               <el-form-item label="记录人"  style="margin-bottom: 5px;">
                  <el-input v-model="search.empName"></el-input>
              </el-form-item>
               <el-form-item label="物料编号"  style="margin-bottom: 5px;">
                  <el-input v-model="search.matterCode"></el-input>
              </el-form-item>
              <el-form-item label="记录类型"  style="margin-bottom: 5px;">
                <el-select v-model="search.recordType" placeholder="请选择">
                    <el-option
                    v-for="item in maskRecord"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                    </el-option>
                </el-select>
               </el-form-item> 

              <el-form-item label="工序"  style="margin-bottom: 5px;">
                <el-select v-model="search.belongGx" placeholder="请选择">
                    <el-option
                    v-for="item in maskGx"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                    </el-option>
                </el-select>
               </el-form-item> 

            <el-form-item label="机床"  style="margin-bottom: 5px;">
                <el-select v-model="search.machineId" placeholder="请选择">
                    <el-option
                    v-for="item in maskMac"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
               </el-form-item> 

            <el-form-item label="记录日期" style="margin-bottom: 0;">
                    <el-date-picker v-model="search.time" 
                    type="daterange" 
                    style="width: 255px;" 
                    range-separator="至" 
                    start-placeholder="开始时间" 
                    end-placeholder="结束时间" 
                    align="right"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              <el-button type="primary" @click="searchBtn"  class="text-right" style="float:right;">确认</el-button>
              <el-button type="primary" @click="cleanSearch"  align="right" style="float:right;margin-right:20px;">重置</el-button>
          </el-form> 
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
      </el-col>
    </el-row>
        
    <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" >
            <el-table-column prop="recordTypeDesc" label="记录类型" sortable min-width="140"></el-table-column>
            <el-table-column prop="belongGxDesc" label="工序"  sortable min-width="60"></el-table-column>
            <el-table-column prop="macName" label="机床" sortable min-width="100"></el-table-column>
            <el-table-column prop="matterCode" label="物料编号" sortable  min-width="100"></el-table-column>
            <el-table-column prop="productTotal" label="产品数量" sortable  min-width="100"></el-table-column>
            <el-table-column prop="empName" label="记录人"  sortable min-width="80"></el-table-column>
            <el-table-column prop="recordTimeDesc" label="记录时间" sortable  min-width="140"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog(scope.row)" type="text" size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->
        <el-dialog  width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-tabs v-model="dialog.activeName" @tab-click="handleClick" >
             <el-tab-pane label="记录详情" name="1">
               <el-form :inline="true" class="demo-form-inline" ref="ruleform" :rules="rules"  label-position="right" label-width="150px" :model="dialog.formDate">

                <el-form-item label="记录类型" >
                    <el-input v-model="dialog.formDate.recordTypeDesc"></el-input>
                </el-form-item>
                
                <el-form-item label="工序" >
                    <el-input v-model="dialog.formDate.belongGxDesc"></el-input>
                </el-form-item>
                
                <el-form-item label="机床" >
                    <el-input v-model="dialog.formDate.macName"></el-input>
                </el-form-item>
                
                <el-form-item label="物料编号" >
                    <el-input v-model="dialog.formDate.matterCode"></el-input>
                </el-form-item>
                
                <el-form-item label="产品数量" >
                    <el-input v-model="dialog.formDate.productTotal"></el-input>
                </el-form-item>
                
                <el-form-item label="记录人" >
                    <el-input v-model="dialog.formDate.empName"></el-input>
                </el-form-item>
                
                <el-form-item label="记录时间" >
                    <el-input v-model="dialog.formDate.recordTimeDesc"></el-input>
                </el-form-item>
                  <el-form-item label="记录照片" >
                      <div    v-for="item in dialog.formDate.recordImgs" :key="item.id"  style="width: 600px;height: 600px;float:center;" > 
                          <img :src="item.image"  style=" width:auto;height: auto; max-width: 100%;max-height: 100%;float:center;"  /> 
                          <!-- <el-image  style="width:200px;height: 320px" :src="item.image"  :preview-src-list="imageList"></el-image> -->
                      </div>
                  
                  </el-form-item>
            </el-form>
            
             </el-tab-pane>

             </el-tabs>
        </el-dialog>
         <el-dialog class="bodyNopaddingTop" :title="outStockDialog.title" :visible.sync="outStockDialog.isShow"  v-dialogDrag width="400px" :close-on-click-modal='false' >
                    <el-form :model="outStockDialog.formData" ref="ruleOutStock"  :rules="outStockRules" label-width="120px" class="demo-ruleForm" :inline="true" >
                        <el-form-item label="出库时间"  prop="outStockDate" >
                             <el-date-picker  v-model="outStockDialog.formData.outStockDate" type="date" placeholder="出库时间" style="width:200px"  ></el-date-picker>
                        </el-form-item> 
                        <el-form-item label="出库人" prop="outStockerName">
                            <el-input v-model="outStockDialog.formData.outStockerName"  style="width：100px"  disabled></el-input>
                        </el-form-item>
                        <el-form-item label="出库类型" prop="result">
                              <el-select v-model="outStockDialog.formData.result">
                                <el-option label="正常使用" value=1></el-option>
                                <el-option label="报废" value=-1></el-option>
                              </el-select>   
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="outStockDialog.formData.remark" type="textarea"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" v-if="dialog.type==='update'">
                           <el-input v-model="outStockDialog.formData.createTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item  class="form-item-block text-center">
                            <el-button type="primary" @click="onSubmitOutStock()">确认</el-button>
                        </el-form-item>
                        
                    </el-form>
         </el-dialog>  
              <div id="qrcode" style="position:absolute;right:35px;top:20px;" ></div>
    </div>
    
</template>
<script>
import QRCode from 'qrcodejs2'
import kzHttp from '@/axios/kzHttp.js'
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    data(){
        return {
            imageList:[],
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                type:'',
                isShow:false,
                formDate:{},
                activeName:'1',
            },
            supplierList:[],
            search:{
                time:'',
                empName:null,
                matterCode:null,
                recordType:null,
                belongGx:null,
                machineId:null,
            },
            outStockTablelist:[],
            outStockDialog:{
                title:'',
                type:'',
                isShow:false,
                formData:{
                },

            },
            maskRecord:[],
            maskGx:[],
            maskMac:[],
        }
    },
    created(){
        let  self = this;
        self.getTableList()
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               empName:self.search.empName,
               recordType:self.search.recordType,
               belongGx:self.search.belongGx,
               workMac:self.search.machineId,
               recordBeginTime:self.search.time[0],
               recordEndTime:self.search.time[1],
            };
            kzHttp.selectRecordPageByCondition(data).then(res=>{
                self.tabaleData=res.content.page.records
                self.pagination.total = res.content.page.total;

                self.maskRecord = res.content.mask_record;
                self.maskGx = res.content.mask_gx;
                self.maskMac = res.content.machines;

            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        cleanSearch(){
            this.search.time = '';
            this.search.empName = null;
            this.search.matterCode = null;
            this.search.recordType = null;
            this.search.belongGx = null;
            this.search.machineId = null;
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(row){
            let self = this;
            self.dialog.title = '详情';
            self.dialog.isShow = true;
            self.dialog.formDate=row;
            row.recordImgs.forEach(item=>{
            self.imageList.push(item.image);
            })

              
        },
        showoutStockDialog(type,row){
           let self = this;
            self.outStockDialog.type=type;
            switch(type){
                case 'insert':
                self.outStockDialog.isShow = true;
                self.outStockDialog.title = '新增出库信息'
                break;
                case 'update':
                     self.outStockDialog.isShow=true;
                     self.outStockDialog.title = '修改出库信息';
                     self.outStockDialog.formData=JSON.parse(JSON.stringify(row));break;
                case 'delete':
                    self.$confirm('是否删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    confirmButtonClass:'bg-warning noBorder',
                    type: 'warning'
                }).then(() => {
                
                }).catch(()=> {});
                    break; 
            }
        },
        onSubmitOutStock(){
          let self=this;
           self.$refs.ruleOutStock.validate((valid) => {
             if(valid){
                 if(self.outStockDialog.type==='insert'){
                     self.outStockDialog.formData.pid=self.dialog.formDate.id;
                     kzHttp.insertkzMaterialDetail(self.outStockDialog.formData).then(res=>{
                          self.$message.success(`${self.outStockDialog.title}成功`);
                            self.outStockDialog.isShow = false;
                            self.getOutStockTableList();
                     })
                 }
                 if(self.outStockDialog.type==='udpate'){
                     kzHttp.updatekzMaterialDetail(self.outStockDialog.formData).then(res=>{
                          self.$message.success(`${self.outStockDialog.title}成功`);
                            self.outStockDialog.isShow = false;
                            self.getOutStockTableList();
                     }) 
                 }

             }else{
                this.$message({
                 message: '提交失败',
                 type: 'warning'
                });
                return false;
             }
           })  
        },
        submitList(){
            let self = this;
            self.$refs.ruleform.validate((valid)=>{
                if(valid){
                    let type = self.dialog.title.indexOf("新增") > -1 ? "insert" : "update";
                    if(type==="insert"){
                        kzHttp.insertkzMaterial(self.dialog.formDate).then(res => {
                            self.$message.success(`${self.dialog.title}成功`);
                            self.dialog.isShow = false;
                            self.getTableList();
                        },error => {
                            self.$message.error(`${self.dialog.title}失败`);
                        });
                    }
                    if(type==="update"){
                        kzHttp.updatekzMaterial(self.dialog.formDate).then(res => {
                            self.$message.success(`${self.dialog.title}成功`);
                            self.dialog.isShow = false;
                            self.getTableList();
                        },error => {
                            self.$message.error(`${self.dialog.title}失败`);
                        });
                    }
                }else{
                     this.$message({
                        message: '提交失败',
                        type: 'warning'
                        });
                    return false; 
                }
            })
            
        },
        printQrCode(row){
            let self=this;
           self.$nextTick(function () {
                    let qrcode = new QRCode("qrcode", {
                        width: 80,
                        height: 80,
                        text: row.code,
                        colorDark: "#000000",
                        colorLight: "#ffffff"
                    });
                });
          setTimeout(()=>{
          self.$print(document.getElementById("qrcode"));
           document.getElementById("qrcode").innerHTML = "";
           },200)
        },
        handleClick(){
          let self = this;
            switch(self.dialog.activeName){
                //出库信息
                case '2':self.getOutStockTableList();
                 break;
            }
        },
        getOutStockTableList(){
         let self=this;
          kzHttp.getkzMaterialDetailByPid(self.dialog.formDate.id).then(res=>{
              self.outStockTablelist=res.content;
          })
        },
        querySaleProductAsync(queryString, callback){
            cgbHttp.searchMaterialKeyWord({name:queryString?queryString:''}).then(res=>{
                res.content.forEach(item=>{
                item.value = item.type+"_"+item.name;
                })
                callback(res.content);
            })
        },
        queryhandleSelect1(item){
            let self=this;
           self.dialog.formDate.material=item.id;
           let a= item.value.split("_");
            self.dialog.formDate.cgMaterial.type=a[0];
            //供应商列表
               cgbHttp.allCgSupplierByMid(item.id).then(res=>{
                 self.supplierList=res.content;
               })
        },
      
    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
.myImage{
   width:auto;
   height: auto;
    max-width: 100%;
    max-height: 100%; 
}
</style>
